@import "common";

$baseColor: #08ba6d !default;
$subColor: #7a7a7a;
$hoverColor: #079d5c;
$orange: #e35e1b;

$baseborder: 1px solid #ccc;

$shadow: 0px 1px 2px #d1d1d1;

body{
  display: block;
}

/* index page */
.banner{
  margin-bottom: 10px;
  .swiper-container{
    img{
      width:100%;
      height:145px;
      display: block;
    }
  }
  .swipe-indicator{
    width: 4px;
    height: 4px;
    border-radius: 2px;
  }
  .swipe-indicator.active{
    width: 8px;
  }
  .my-swipe {
    height: 145px;
    color: #fff;
    font-size: 30px;
    text-align: center;
  }
  .slide1 {
    background-color: #0089dc;
    color: #fff;
  }
  .slide2 {
    background-color: #ffd705;
    color: #000;
  }
  .slide3 {
    background-color: #ff2d4b;
    color: #fff;
  }
  .top-nav{
    background: #fff;
    box-shadow: 0px 1px 2px #ccc;
    div{
      width: 33.33%;
      display: inline-block;
      float: left;
      text-align: center;
      a{
        height:80px;
        width: 100%;
        display: inline-block;
        font-size: 12px;
        padding-top: 4px;
        color: $baseColor;
        i{
          display: block;
          font-size: 46px;
        }
      }
    }
  }
}
.menu{
  background: #fff;
  border-top: $baseborder;
  box-shadow: $shadow;
  margin-bottom: 60px;
  div{
    display: inline-block;
    float: left;
    text-align: center;
    border-right: $baseborder;
    border-bottom: $baseborder;
    a{
      height:90px;
      width: 100%;
      display: inline-block;
      font-size: 12px;
      padding-top: 10px;
      img{
        width: 52px;
        display: block;
        margin: 0 auto 6px;
      }
    }
  }
  div:nth-child(3n){
    border-right: 0;
  }
}
.fixed-bottom{
  position: fixed;
  background: #fff;
  width:100%;
  bottom: 0;
  z-index: 99;
  border-top: $baseborder;
  .active{
    background: #08ba6d;
  }
  div{
    display: inline-block;
    float: left;
    text-align: center;
  }
  a{
    width: 100%;
    display: inline-block;
    font-size: 12px;
    color: $subColor;
    i{
      display: block;
      font-size: 30px;
      height: 28px;
      line-height: 32px;
    }
    &.cur{
      color: $baseColor;
    }
  }
}

.no-bind{
  .open-arrow{
    position: fixed;
    bottom: 65px;
    right: -4px;
    z-index: 1;
    img{
      width: 26px;
    }
  }
  .open-bg{
    position: fixed;
    bottom: 52px;
    right: 0;
    width: 205px;
    -webkit-transform: translate3d(180px, 0, 0);
    transform: translate3d(180px, 0, 0);
    -webkit-transition: -webkit-transform 0.1s ease-in-out;
    transition: transform 0.1s ease-in-out;
    &.active{
      -webkit-transform: translate3d(2px, 0, 0);
      transform: translate3d(2px, 0, 0);
    }
  }
}
.open-dialog{
  position: fixed;
  right: 0;
  bottom: 58px;
  width: 224px;
  height: 123px;
  -webkit-transform: translate3d(290px, 0, 0);
  transform: translate3d(290px, 0, 0);
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  &.active{
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
  }
  .content-wrap{
    position: fixed;
    bottom: 0;
    -webkit-transform: translate3d(290px, 0, 0);
    transform: translate3d(290px, 0, 0);
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    &.active{
      -webkit-transform: translate3d(0px, 0, 0);
      transform: translate3d(0px, 0, 0);
    }
    button{
      position: fixed;
      bottom: 67px;
      left: 14px;
      img{
        width: 25px;
      }
    }
  }
  p{
    position: fixed;
    bottom: 25px;
    width: 166px;
    font-size: 12px;
    line-height: 16px;
    text-indent: 2em;
    left: 43px;
  }
  .go-auth{
    position: fixed;
    bottom: 6px;
    left: 154px;
    width: 52px;
    color: $baseColor;
  }
}

/* Policy */
.sub-banner{
  //height: 98px;
  min-height: 98px;
  background: $baseColor url("../img/banner_bg1.png") repeat center;
  background-size: 35%;
  padding-top: 20px;
  position: relative;
  a{
    position: absolute;
    left: 12px;
    img{
      width: 20px;
    }
  }
  img{
    width: 25%;
    display: block;
    margin: 0 auto;
  }
}
.sub-banner2{
  //background: $baseColor url("../img/banner_bg2.svg") repeat center;
  background: $baseColor url("../img/banner_bg1.png") repeat center;
  background-size: 35%;
}
.toper-nav{
  border-top: 1px solid #fff;
  a{
    background: $baseColor;
    height: 42px;
    color: #fff;
    font-weight: bold;
  }
  .cur::after {
    content: "";
    display: block;
    background: rgba(0,0,0,0.2);
    width:100%;
    height: 42px;
    margin-top: -27px;
  }
  .col2{
    border-right: 1px solid #fff;
  }
  .col2:last-child{
    border-right: none;
  }
}
.toper-nav2 .col-nav a{
  padding-top: 12px;
  &.cur{
    font-weight: bold;
  }
}
.srh{
  position: relative;
  background: #f2f2f2;
  input{
    width:100%;
    line-height: 35px;
    padding-left: 12px;
    padding-right: 48px;
    border: $baseborder;
  }
  a{
    width: 44px;
    height: 35px;
    background: #fff;
    position: absolute;
    right: 11px;
    color: $baseColor;
    top: 11px;
    text-align: center;
    line-height: 35px;
  }
}
.thumnail{
  cursor: pointer;
  margin-bottom: 10px;
  .container{
    padding: 0 10px;
  }
  .thumnail-wrap{
    border: $baseborder;
    display: block;
  }
  .pic{
    position: relative;
    height: 190px;
    overflow: hidden;
    img{
      width: 100%;
    }
    .tit{
      background: #fff;
      opacity: 0.7;
      position: absolute;
      bottom: 0;
      width: 100%;
      //height:55px;
      overflow: hidden;
      text-align: center;
      padding: 8px 0;
      h2{
        font-weight: bold;
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-indent: 2em;
      }
    }
  }
  .caption{
    color: #7a7a7a;
    //padding: 10px 10px 14px;
    padding: 6px 10px;
    background: #fff;
    .info{
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-indent: 2em;
    }
    i{
      vertical-align: middle;
      color: #5799dd;
      margin-right: 4px;
    }
  }
}
.hot-thumnail{
  cursor: pointer;
  margin-bottom: 10px;
  .container{
    padding: 0 10px;
  }
  .thumnail-wrap{
    border: $baseborder;
    display: block;
    position: relative;
    background: #fff;
    padding: 10px 9px 0 20px;
    .hot-icon{
      position: absolute;
      left: 0;
      width: 35px;
      top: 0;
      z-index:1;
    }
    .thum-body{
      position: relative;
      h2{
        font-size: 14px;
        margin-bottom: 12px;
        //margin-bottom: 24px;
      }
      p{
        width: 60%;
        display: inline-block;
      }
      img{
        width:94px;
        height:75px;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .thum-foot{
      color: #7a7a7a;
      padding: 10px 0;
      i{
        vertical-align: middle;
        color: #5799dd;
        margin-right: 4px;
      }
    }
  }
}
.no-thumnail{
  cursor: pointer;
  margin-bottom: 10px;
  .container{
    padding: 0 10px;
  }
  .thumnail-wrap{
    border: $baseborder;
    display: block;
    position: relative;
    background: #fff;
    padding: 10px 9px 0 20px;
    .thum-body{
      position: relative;
      h2{
        font-size: 14px;
        margin-bottom: 15px;
        /*text-align: center;*/
      }
      p{
        display: inline-block;
        display: -webkit-box;     
        -webkit-box-orient: vertical;    
        -webkit-line-clamp: 4;    
        overflow: hidden; 
        text-indent: 2em;
      }
    }
    .thum-foot{
      color: #7a7a7a;
      padding: 10px 0;
      i{
        vertical-align: middle;
        color: #5799dd;
        margin-right: 4px;
      }
    }
  }
}
/* Policy detail */
header{
  background: $baseColor;
  height: 45px;
  line-height: 45px;
  color: #fff;
  width: 100%;
  margin: 0 auto;
  position: relative;
  .back{
    position: absolute;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    padding-top: 6px;
    img{
      display: inline-block;
      width: 20px;
    }
  }
  h4{
    text-align: center;
    font-size: 16px;
  }
}
.section1{
  h1{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  p{
    font-size: 16px;
    line-height: 30px;
    img{
      max-width:100%;
      height:100%;
    }
  }
  .mob-author{
    height: 24px;
    line-height: 24px;
    margin-bottom: 24px;
    span{
      color: #808080;
    }
    .fr{
      margin-left: 20px;
    }
    .watch i{
      color: #5799dd;
    }
    .nice i{
      color: #eb8f33;
    }
    .share i{
      color: #3bb2c4;
    }

    .is-active i{
      color: #808080!important;
    }
  }
}

.section2{
  background: #fff;
  margin-bottom: 10px;
  h1{
    font-size: 15px;
    font-weight: bold;
    padding-top: 4px;
  }
  p{
    font-size: 13px;
    text-indent: 25px;
  }
}
.toper-tit{
  background: #fff;
  margin-bottom: 10px;
  h1{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 12px;
    margin-top: 6px;
    text-align: center;
  }
  .mob-author{
    height: 24px;
    line-height: 24px;
    margin-bottom: 0;
    span{
      color: #808080;
    }
    .fr{
      margin-left: 20px;
    }
    .watch i{
      color: #5799dd;
    }
    .nice i{
      color: #eb8f33;
    }
    .share i{
      color: #3bb2c4;
    }

    .is-active i{
      color: #808080!important;
    }

  }
}

.rside-article{
  background: #fff;
  width: 80%;
  float: right;
  p{
    font-size: 13px;
  }
  .toper-tabs{
    margin-bottom: 10px;
  }
  .col3{
    //width: 31.33%;
    border: $baseborder;
    //display: inline-block;
    float: left;
    text-align: center;
    span{
      display: block;
      line-height: 30px;
    }
    &.cur{
      color: $baseColor;
      //border-color: $baseColor;
      //border: none;
      //color: #fff;
      border-bottom: 2px solid $baseColor;
      //background: $baseColor;
    }
  }
}

/* edu */
.list{
  background: #fff;
  position: relative;
  .hot-icon{
    position: absolute;
    .section2{
      background: #fff;
      margin-bottom: 10px;
      h1{
        font-size: 15px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      p{
        font-size: 13px;
      }
    }
  }
  li{
    a{
      padding: 0 14px 0 14px;
      display: block;
      height: 50px;
      line-height: 50px;
      border-bottom: $baseborder;
      background: url(../img/arrow_right_gray.png) no-repeat center right 10px;
      background-size: 10px;
      text-overflow: ellipsis;
      overflow:hidden;
      white-space: nowrap;
      font-size: 14px;
    }
  }
  li:last-child a{
    border-bottom: none;
  }
}

/* labour */
.select{
  background: #fff;
  margin-bottom: 40px;
  p{
    margin-bottom: 18px;
    span{
      color: #7a7a7a;
    }
    select{
      width: 75%;
      height:35px;
      border: none;
      border-bottom: $baseborder;
    }
    a{
      width:30px;
      height: 30px;
      vertical-align: middle;
      display: inline-block;
      img{
        width: 30px;
      }
    }
    textarea{
      width: 76%;
      margin-top: 10px;
      margin-left: 21%;
      padding: 10px;
      height: 85px;
      resize: none;
      border: $baseborder;
    }
  }
}
.submit-btn{
  background: #ccc;
  text-align: center;
  button{
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 15px;
    width:100%;
    &.cur{
      background: $baseColor;
    }
  }
}

/* recruit */
.mob-author .teacher{
  margin-left: 10%;
}

//.job-match{
  .job-list{
    background: #fff;
    border-top: $baseborder;
    margin-bottom: 10px;
    .list-body{
      border-bottom: $baseborder;
      padding: 8px 15px 14px;
    }
    img{
      margin-right: 14px;
    }
    h4{
      font-size: 15px;
      padding-top: 4px;
      margin-bottom: 4px;
    }
    p{
      font-size: 12px;
      span{
        font-weight: bold;
        color: #fca830;
      }
    }
    .list-footer{
      position: relative;
      span{
          padding-left: 15px;
          line-height: 40px;
          color: #454545;
          width: 66%;
          display: inline-block;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
      }
      button{
        width: 100px;
        height: 44px;
        background: #08ba6d;
        color: #fff;
        &.active{
          background: #ccc;
        }
      }
    }
  }
//}
.no-data{
  position: relative;
  text-align: center;
  .line{
    border-bottom: 1px solid #ccc;
    display: block;
    position: absolute;
    z-index: -1;
    top: 9px;
    width: 100%;
  }
  span{
    width: 95px;
    text-align: center;
    margin: 0 auto;
    background: #f2f2f2;
    display: inline-block;
    color: #808080;
    font-size: 10px;
  }
}
/* suggestion */
.suggestion{
  textarea{
    width:100%;
    padding: 8px;
    border: $baseborder;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
  }
}

/* news-index */
.thumbnail-wrap>div:last-child{
  margin-bottom: 60px;
}
.header{
  //background: #08ba6d;
  background: $baseColor;
  position: fixed;
  width: 100%;
  top:0;
  z-index: 99;
  height: 42px;
  overflow: hidden;
  .toper-bar{
    height: 42px;
    color: #fff;
    font-size: 13px;
    line-height: 42px;
    a{
      color: #fff;
      opacity: 0.6;
      &.cur{
        font-size: 15px;
        opacity: 1;
      }
    }
  }
  .col-nav a{
    padding: 0px 10px 0px;
    color: #fff;
  }
  .location{
    height: 42px;
    color: #fff;
    font-size: 13px;
    line-height: 42px;
    margin-right: 12px;
    a{
      border: 1px solid #fff;
      color: #fff;
      font-size: 12px;
      padding: 2px 6px;
    }
  }
}

.side-nav{
  border-top: 1px solid #fff;
  position: absolute;
  background: #f2f2f2;
  height: calc( 100% - 98px );
  padding-right: 8px;
  .nav-block{
    width: 54px;
    text-align: center;
    &.cur {
      width: 58px;
      a{
        background: $baseColor;
        //opacity: 0.8;
        color: #fff;
        padding: 5px 16px 0;
        border-bottom: none;
      }
    }
    a {
      width: 100%;
      display: inline-block;
      font-size: 12px;
      padding: 0 10px 0px;
      font-weight: bold;
      height: 42px;
      background: #fff;
      border-bottom: $baseborder;
    }
  }
}

/* load more */
.loadmore{
  text-align: center;
  background: #efefef;
  line-height: 30px;
}

/* no result */
.no-res{
  //background: #fff;
  text-align: center;
  width: 100%;
  img {
    width: 120px;
    vertical-align:middle;
  }
  h4{
    font-size: 20px;
    color: #ccc;
  }
}

/* news list page */
.news-body{
  //padding-top: 13%;
  background: #f2f2f2;
  .srh{
    padding-top: 44px;
    a{
      top: 55px;
    }
  }
}

/* suggestion */
.suggest-toast{
  .weui_toast i{
    font-size: 55px;
  }
  .weui_icon_warn:before{
    color: #fff;
  }
}

/* labour  */
.labour-type3{
  .weui_dialog{
    width: 100%;
    height: 100%;
    border-radius: 0;
    .close{
      width: 18px;
      height: 18px;
      position: absolute;
      right: 15px;
      top: 15px;
      img{
        width: 18px;
      }
    }
  }
  .weui_dialog_hd{
    color: $baseColor;
    font-size: 18px;
    margin-bottom: 10px;
  }
  .weui_dialog_bd{
    padding: 0 10px;
    li{
      display: inline-block;
      width: 90px;
      height: 36px;
      border: 1px solid #dadada;
      border-radius: 4px;
      text-align: center;
      line-height: 36px;
      margin: 0 5px 10px;
    }
    .cur{
      border-color: $baseColor;
    }
    p{
      font-size: 10px;
      color: #ccc;
      margin-top: 30px;
    }
  }
  footer{
    position: fixed;
    bottom: 0;
    height: 42px;
    background: #ccc;
    width: 100%;
    line-height: 42px;
    text-align: center;
    button{
      color: #fff;
      font-size: 18px;
      width: 100%;
      height: 42px;
      &.cur{
      background: $baseColor;
    }
    }
  }
}
.my-feature {
  span{
    color: #7a7a7a;
  }
  button{
   display: block;
   margin-left: 72px;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    img{
      width:50px;
      border: 1px solid $baseColor;
    }
 }
  textarea{
    margin-left: 72px;
    width: 74%;
    border: 1px solid $baseColor;
  }
}
.label{
  width: 76%;
  margin-left: 70px;
  li{
    border: $baseborder;
    border-radius: 6px;
    display: inline-block;
    line-height: 32px;
    width: 90px;
    margin: 0 12px;
    text-align: left;
    margin-bottom: 10px;
    position: relative;
    padding-left: 10px;
    i{
      width: 24px;
      background: url("../img/close_btn.png") no-repeat 9px 9px;
      background-size: 12px;
      height: 32px;
      position: absolute;
      cursor: pointer;
    }
  }
}

/* 岗位详情 */
.trainInfo-bd{
  .toper-tit h1{
    text-align: left;
  }
  .toper-tit .mob-author span strong{
    font-size: 15px;
    color:#ffa500;
  }
  .section2 p{
    line-height: 22px;
  }
  .section2 h1 {
    text-indent: 26px;
    font-weight: 100;
  }
  .weui_dialog_hd {
    margin-bottom: 14px;
  }
  .weui_dialog_title{
    font-weight: 800;
    color: #08ba6d;
  }
  .weui_dialog_bd {
    font-size: 12px;
  }
  .weui_btn_dialog.primary{
    color: #fff;
    background: $baseColor;
    font-size: 15px;
  }
}

/* 培训信息 */
.train-info{
  .train-list{
    background: #fff;
    border-top: $baseborder;
    margin-bottom: 10px;
    padding: 0 10px;
    cursor: pointer;
    .list-body{
      border-bottom: $baseborder;
      padding: 8px 0 14px;
    }
    h4{
      font-size: 15px;
      padding-top: 8px;
      margin-bottom: 4px;
    }

    p{
      font-size: 12px;
      line-height: 20px;
      span{
        font-weight: bold;
        color: #fca830;
      }
    }

    .list-footer{
      padding: 10px 0;
      span{
        color: #454545;
        display: block;
        line-height: 22px;

        width: 66%;
      }
      button{
        width: 100px;
        height: 40px;
        background: #08ba6d;
        color: #fff;
        &.active{
          background: #ccc;
        }
      }
    }
  }
}

/* 残疾人认证 */
.auth{
  .container{
    padding: 35px 30px 0;
  }
  h1{
    font-size: 25px;
    color: $baseColor;
    text-align: center;
  }
  .auth-head{
    width: 72px;
    height: 72px;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 36px;
    margin-top: 35px;
    img{
      width: 100%;
    }
  }
  .auth-form{
    padding: 10px 12px;
    border: $baseborder;
    border-radius: 18px;
    margin-top: 30px;
  }
  .login-row{
    font-size: 13px;
    line-height: 24px;
    padding: 8px 0;
    border-bottom: $baseborder;
  }
  .login-row:last-child{
    border-bottom: none;
  }
  span{
    font-size: 18px;
    color: #ccc;
  }
  .name{
    color: #3a3a3a;
    font-size: 14px;
    width: 50px;
    display: inline-block;
  }
  input{
    padding: 0 14px;
    width: 73%;
  }
  .login-submit{
    background: $baseColor;
    height: 40px;
    line-height: 40px;
    color: #fff;
    display: block;
    width: 100%;
    border-radius: 10px;
    margin-top: 32px;
    font-size: 18px;
  }
}

/* 残疾人认证2 */
.get-qr{
  position: relative;
  .qr-btn{
    border-radius: 14px;
    width: 74px;
    height: 25px;
    border: 1px solid $baseColor;
    color: $baseColor;
    position: absolute;
    right: 0;
    top: 11px;
  }
  .cur{
    color: #ddd;
    border-color: #ddd;
  }
}
/* 个人信息 */
.personal-banner{
  min-height: 125px;
  background: $baseColor;
  background-size: 35%;
  padding-top: 20px;
  position: relative;
  a {
    position: absolute;
    left: 12px;
    img {
      width: 20px;
      display: block;
      margin: 0 auto;
    }
  }
  .head-img{
    img{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 82px;
      height: 82px;
      border-radius: 41px;
      margin-top: -41px;
      margin-left: -41px;
    }
  }
}

.cell-body{
  .weui_cells{
    font-size: 14px;
  }
  .weui_cell_bd{
    color: #a8a8a8;
  }
  .weui_cell_ft{
    color: #333;
  }
}

.auth-body{
  background-color: #fff;
  margin-top: 10px;
  .hd{
    border-bottom: $baseborder;
    line-height: 28px;
    position: relative;
    padding-bottom: 6px;
    font-size: 14px;
    button{
      width: 60px;
      height: 25px;
      position: absolute;
      right: 5px;
      top: 0px;
      border: 1px solid $baseColor;
      color: $baseColor;
      font-size: 12px;
    }
  }
  .unbind-bd{
    text-align: center;
    padding: 30px 0 40px;
    h4{

    }
    button{
      width: 100px;
      height: 35px;
      border: 1px solid $baseColor;
      margin-top: 20px;
      color: $baseColor;
      font-size: 15px;
    }
  }
  .bind-bd{
    padding: 18px 10px 0px;
    p{
      font-size: 14px;
      line-height: 25px;
      color: #787878;
      span{
        width: 76px;
        display: inline-block;
      }
    }
  }
}

/* 我的培训 */
.sm-tit{
  min-height: 125px;
  background: $baseColor;
  background-size: 35%;
  padding-top: 20px;
  position: relative;
  a {
    position: absolute;
    left: 12px;
    img {
      width: 20px;
      display: block;
      margin: 0 auto;
    }
  }
}

.train-lists{
  margin-bottom: 20px;
  padding: 10px;
  .train-wrap{
    margin-bottom: 25px;
  }
  small{
    color: #cdcdcd;
    margin-bottom: 10px;
    display: block;
  }
  .train-list{
    padding: 0 10px;
    background: #fff;
    border: $baseborder;
  }
  .list-hd{
    font-size: 16px;
    line-height: 60px;
    border-bottom: $baseborder;
  }
  .list-bd{
    font-size: 14px;
    color: #6d6d6d;
    padding: 10px 0;
  }
}

/* 我的求职 */
.my-job{
  .date{
    width: 100px;
    height: 44px;
    border-left: 1px solid #ccc;
    line-height: 44px;
    padding: 0 5px;
    color: #08ba6d;
    position: absolute;
    right: 0;
    top: 1px;
    font-size: 12px;
    img{
      width: 18px;
      margin: 0;
    }
    color: $baseColor;
  }
}

/* 我的收藏 */
.my-store-bd{
  padding-bottom: 40px;
  .hot-thumnail .thumnail-wrap .thum-body h2 {
    font-size: 14px;
    margin-bottom: 12px;
    width: 171px;
    text-overflow: ellipsis;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .hot-thumnail .thumnail-wrap .thum-body p{
    color: #7a7a7a;
    text-overflow: ellipsis;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .no-thumnail .thumnail-wrap .thum-body p{
    color: #7a7a7a;
    text-overflow: ellipsis;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
  .thumnail-wrap{
    position: relative;
  }
  .mask-wrap{
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.6);
    display: none;
  }
  .dialog-bd{
    text-align: center;
    padding-top: 35px;
    a{
      color: #fff;
      display: inline-block;
      text-align: center;
      margin: 0 20px;
    }
    img {
      width: 55px;

    }
  }
  .thumnail .dialog-bd{
    padding-top: 100px;
  }
  .no-thumnail .dialog-bd{
    padding-top: 16px;
  }
  .check{
    position: absolute;
    top: 10px;
    width: 25px;
    height: 25px;
    left: 10px;
    img{
      width:25px;
    }
  }
}

header .editor{
  position: absolute;
  right:10px;
  border: 1px solid #fff;
  top: 11px;
  width: 50px;
  height: 25px;
  color: #fff;
}

.del button{
  color: #717171;
}

.message-lists{
  .message-list{
    padding: 18px 0;
    position: relative;
    h5{
      text-align: center;
      color: #cbcbcb;
      font-size: 12px;
      margin-bottom: 18px;
    }
    .self-message{
      margin: 0 18px 0 60px;
      background: #30e063;
      border-radius: 6px;
      position: relative;
      padding: 10px;
    }
    i{
      width: 10px;
      position: absolute;
      right: -10px;
      top: 4px;
      height: 28px;
      z-index: 111;
      display: block;
      background: url(../img/message_icon.png) no-repeat;
      background-size: 10px;
    }
  }
}


/* common */
.container{
  padding: 10px;
}
body{
  //font-size: 12px;
  color: #232323;
  background: #f2f2f2;
  //background: #fff;
}
select{
  outline: medium none;
}
.fl{
  float: left;
}
.fr{
  float:right;
}
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
.p10{
  padding: 0 10px;
}

.col-nav{
  display: inline-block;
  float: left;
  text-align: center;
  a{
    width: 100%;
    display: inline-block;
    font-size: 12px;
    //padding: 5px 10px 0px;
    i{
      display: block;
    }
  }
}
.btn-primary{
  background: $baseborder;
}

/* 覆盖 */
.weui_dialog_confirm .weui_dialog .weui_dialog_bd{
  text-align: center;
}

/* 个人中心 */
.personal-center-toper{
  min-height: 190px;
  //background: #08ba6d;
  background: $baseColor;
  padding-top: 20px;
  position: relative;
  margin-bottom: 10px;
  a {
    position: absolute;
    left: 12px;
    z-index: 9;
    img {
      width: 20px;
      display: block;
      margin: 0 auto;
    }
  }
  .user-head{
    position: relative;
  }
  .user-head-wrap{
    margin: 0 auto;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    border: 2px solid #fff;
    text-align: center;
    overflow: hidden;
    img{
      width: 80px;
    }
  }
  .auth-icon{
    position: absolute;
    top: 0;
    left: 50%;
    width: 40px;
    height: 20px;
    z-index: 9;
  }
  h4{
    text-align: center;
    color: #fff;
    font-size: 16px;
    margin-top: 10px;
  }
  p{
    text-align: center;
    color: #fff;
    font-size: 12px;
    margin-top: 30px;
  }
  .integral{
    width: 48%;
    display: inline-block;
  }
  .sign-in{
    width: 48%;
    display: inline-block;
  }
}

.personal-center-menu{
  background: #fff;
  border-top: 1px solid #ccc;
  box-shadow: 0px 1px 2px #d1d1d1;
  div {
    display: inline-block;
    float: left;
    text-align: center;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    a {
      height: 70px;
      width: 100%;
      display: inline-block;
      font-size: 14px;
      padding-top: 20px;
      position: relative;
      img {
        width: 25px;
        margin-right: 10px;
      }
      span{
        vertical-align: super;
      }
    }
    i{
      color: #fff;
      background: red;
      height: 15px;
      border-radius: 10px;
      font-size: 12px;
      position: absolute;
      left: 50px;
      padding: 0 3px;
    }
  }
}

/* 投票 */
.vote-lists{
  .list{
    margin-bottom: 15px;
    box-shadow: 3px 3px 6px #d1d1d1;
    border-radius: 4px;
  }
  .list-wrap{
    background: #fff;
    border-radius: 4px;
  }
  .list-hd{
    padding: 10px;
    h4{
      font-size: 16px;
    }
    p{
      font-size: 12px;
    }
  }
  .list-bd{
    color: #999;
    height: 145px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    img{
      width: 100%;
    }
    button{
      width:100%;
      position: absolute;
      bottom: 0;
      background: rgba(8,186,109,0.9);
      color: #fff;
      font-weight: bold;
      padding: 10px;
    }
    .finished{
      background: rgba(195,200,204,0.9);
    }
  }
}

.vote-tips{
  .tips-wrap{
    background: #fff;
    border-radius: 4px;
  }
  .tips-hd{
    border-bottom: $baseborder;
    line-height: 45px;
    h4{
      font-weight: bold;
      text-align: center;
      font-size: 16px;
    }
  }
  .tips-bd{
    padding: 15px 10px;
    color: #999;
  }
}
.vote-rules{
  font-size: 12px;
  border-bottom: $baseborder;
}
.vote-obj{
  .obj-wrap{
    overflow: hidden;
    width: 49%;
    margin-bottom: 10px;
    &:nth-child(odd){
      float: left;
    }
    &:nth-child(even){
      float: right;
    }
  }
  .hd{
    height: 120px;
    position: relative;
    border-bottom: $baseborder;
    overflow: hidden;
    .head-lg{
      width: 100%;
      opacity: 0.2;
    }
    p{
      position: absolute;
      right: 10px;
      top: 10px;
      border: 1px solid #e35e1b;
      color: #e35e1b;
      border-radius: 10px;
      padding: 0 10px;
      font-size: 12px;
    }
    .head-sm{
      width:60px;
      height:60px;
      z-index:2;
      overflow: hidden;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      position: absolute;
      bottom: 8px;
      left: 10px;
      img{
        height: 100%;
      }
    }
    h2{
      position: absolute;
      bottom: 36px;
      z-index: 2;
      left: 77px;
      font-size: 22px;
    }
    h3{
      position: absolute;
      bottom: 18px;
      z-index: 2;
      left: 77px;
      font-size: 14px;
    }
  }
  .bd{
    background: #fff;
    p{
      padding: 11px 14px;
      height: 56px;
      line-height: 20px;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      font-size: 12px;
    }
    button{
      width: 100%;
      color: #fff;
      height: 40px;
      background: url(../img/vote_btn.png) no-repeat center;
      background-size: 100%;
      &.disableBtn{
        background: #999;
      }
    }
  }
}
.vote-dialog{
  position: relative;
  .head-pic {
    //position: fixed;
    //z-index: 5001;
    //width: 20%;
    //top: 36%;
    //left: 50%;
    //-webkit-transform: translate(-50%,-50%);
    //transform: translate(-50%,-50%);
    //background-color: #fafafc;
    //text-align: center;
    //overflow: hidden;
    //border-radius: 50%;
    //border: 4px solid #fff;

    border-radius: 50%;
    width: 20%;
    overflow: hidden;
    margin: 0 auto;
    img{
      width: 100%;
    }
  }
  .weui_dialog_hd {
    border-bottom: $baseborder;
    padding: 0.8em 20px .5em!important;
    .fl{
      font-weight: bold;
      font-size: 16px;
      color: #c5c5c5;
    }
    .fr{
      font-size: 12px;
      color: $orange;
    }
  }
  .weui_dialog_bd{
    padding-top: 20px;
    min-height: 60px;
  }
}
/* share */
.share-pic{
  position: fixed;
  z-index: 1001;
  top: 0;
  right: 0;
}

/* explorer */
.gradientsWrap{
  height: 100%;
  background-repeat: no-repeat;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#24a966), color-stop(100%,#2f516c));
  padding-top: 36px;
  .explorer-wrap{
    //background-repeat: no-repeat;
    //background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#24a966), color-stop(100%,#2f516c));
  }
  img{
    width: 68px;
    display: block;
    margin: 0 auto 10px;
  }
  .col2{
    float: left;
    display: block;
    text-align: center;
    margin-bottom: 25px;
    span{
      color: #fff;
    }
  }
}
.video {
  .img{
    overflow: hidden;
    height: 150px;
    position: relative;
    h5{
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -25px;
      margin-top: -28px;
      img{
        width: 50px;
      }
    }
    img{
      width: 100%;
    }
  }
}

/* films */
#film{
  background: #fff;
}
.films-lists{
  .list{
    margin-bottom: 10px;
  }
  .img{
    overflow: hidden;
    height: 150px;
    position: relative;
    h5{
      position: absolute;
      right: 6px;
      bottom: 6px;
      img{
        width: 40px;
      }
    }
    img{
      width: 100%;
    }
  }
  .ft{
    border-bottom: $baseborder;
    margin: 10px;
    h4{
      font-size: 16px;
      font-weight: 800;
      margin-bottom: 10px;
    }
    p{
      font-size: 12px;
      line-height: 20px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
    }
    a{
      color: $baseColor;
      font-size: 14px;
    }
  }
}

/* reading */
.lists{
  .ls{
    width: 71px;
    height: 85px;
    overflow: hidden;
    img{
      //width: 100%;
    }
  }
  .rs{
    width: calc(100% - 84px);
    border-bottom: $baseborder;
    padding-bottom: 10px;
    h4{
      font-size: 14px;
      margin-bottom: 10px;
    }
    span{
      margin-bottom: 10px;
    }
    .ft-text{
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      height: 34px;
    }
    p,
    span{
      font-size: 12px;
      color: #999;
    }
  }
}
.norvel-ft{
  width: 100%;
  position: fixed;
  bottom: 0;
  background: #fff;
  .col2{
    text-align: center;
    float: left;
    line-height: 50px;
  }
  .norvel-menu{
    position: fixed;
    left: 50%;
    bottom: 10px;
    a{
      background: $baseColor;
      height: 60px;
      width: 60px;
      display: block;
      border-radius: 50%;
      margin-left: -30px;
      line-height: 60px;
      text-align: center;
      color: #fff;
    }
  }
}
/* reading details */
.details-wrap{
  background: #fff;
  margin-bottom: 10px;
  .hd-info{
    border-bottom: $baseborder;
  }
  .ls{
    width: 71px;
    height: 85px;
    overflow: hidden;
    img{
      //width: 100%;
    }
  }
  .rs{
    width: calc(100% - 84px);
    padding-bottom: 10px;
    h4{
      font-size: 14px;
      margin-bottom: 10px;
    }
    span{
      margin-bottom: 2px;
    }
    .ft-text{
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    p,
    span{
      font-size: 12px;
      color: #999;
    }
  }
  .intro{
    border-bottom: $baseborder;
    h5{
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
}
.chapter-lists{
  background: #fff;
  .tit{
    border-bottom: $baseborder;
    padding: 10px;
    h2{
      display: inline-block;
    }
    span{
      float: right;
      font-size: 12px;
      color: #999;
    }
  }
  a{
    display: block;
    color: #999;
    margin: 0 10px;
    padding: 10px;
    border-bottom: $baseborder;
  }
}

/* film */
.film-intro{
  background: #fff;
  h4{
    font-size: 18px;
    font-weight: 800;
    display: inline-block;
    margin-right: 30px;
  }
  .tit{
    margin-bottom: 15px;
  }
  span{
    color: #999;
    font-size: 12px;
    display: inline-block;
    i{
      width: 17px;
      height: 17px;
      background: url("../img/watch_num.png") no-repeat center;
      background-size: 100%;
      vertical-align: bottom;
      display: inline-block;
      margin-right: 4px;
    }
  }
  ul{
    margin-bottom: 20px;
    li{
      border-radius: 50px;
      padding: 2px 6px;
      font-size: 12px;
      color: #63c0e5;
      float: left;
      margin-right: 10px;
      border: 1px solid #63c0e5;
    }
  }
  .actor{
    border-bottom: $baseborder;
    padding-bottom: 10px;
    p{
      color: #999;
      font-size: 14px;
      span{
        font-size: 14px;
        margin-right: 20px;
      }
    }
  }
}
.film-info{
  background: #fff;
  padding: 0 10px 10px;
  h5{
    font-size: 14px;
    color: #999;
    margin-bottom: 4px;
  }
  p{
    line-height: 22px;
  }
}

/* map */
.view-btn{
  position: fixed;
  bottom: 10px;
  z-index: 100;
  width: 100%;
  text-align: center;
  button{
    background: #08ba6d;
    color: #fff;
    font-size: 14px;
    line-height: 50px;
    height: 50px;
    width: 94%;
  }
}
#map{
  .wrap{
    padding: 15px;
    border-radius: 8px;
    .col2{
      float: left;
      text-align: center;
      padding: 20px;
    }
    .br{
      border-right: $baseborder;
    }
    .bb{
      border-bottom: $baseborder;
    }
    img{
      width:40px;
      display: block;
      margin: 0 auto 10px;
    }
  }
  .weui_dialog{
    border-radius: 6px;
  }
}
.srh-list{
  h4{
    line-height: 15px;
    color: #999;
  }
  header{
     h4{
       text-align: center;
       font-size: 16px;
       color: #fff;
       line-height: 45px;
     }
  }
  .list-by{
    padding: 0 10px;
    background: #fff;
    border-top: $baseborder;
    ul{
      li{
        border-bottom: $baseborder;
        padding: 10px 0;
        .hd{
          margin-bottom: 10px;
        }
        h5{
          font-size: 14px;
        }
        span{
          color: #2974C3;
        }
        p{
          color: #999;
          //margin-bottom: 15px;
        }
      }
    }
  }
}
.mapTips{
  h6{
    font-size: 16px;
    text-align: left;
    margin-bottom: 10px;
  }
  p{
    width:100%!important;
    text-align: left;
  }
}

/* 404 */
.not-found-bd{
  display: flex;
  justify-content: center;
  //align-items: center;
}
.not-found{
  text-align: center;
  padding-top: 40%;
}
.not-found img{
  width: 60%;
}
.not-found h1{
  font-size: 18px;
  margin-top: 10px;
  color: #999;
}
.not-found a{
  margin-top: 30px;
  font-size: 20px;
  border: $baseborder;
  display: block;
  border-color: $baseColor;
  color: $baseColor;
  margin: auto;
  margin-top: 30px;
  width: 40%;
  line-height: 40px;
}

/* policy-details page attention button */
.attention {
  position: fixed;
  width: 100%;
  background: rgba(0,0,0,0.5);
  bottom: 0;
  padding: 8px;
  button{
    background: $baseColor;
    color: #fff;
    width: 35%;
    line-height: 30px;
    display: block;
    margin: 0 auto;
  }
}
.qr-pic{
  box-shadow: 0px 2px 20px #333333;
  padding: 15px;
  background: #fff;
  position: fixed;
  text-align: center;
  left:50%;
  top:50%;
  margin-top:-100px;
  margin-left:-100px;
  width:200px;
  height:200px;
  z-index:1;
  border-radius: 4px;
  img{
    width: 80%;
    height: 80%;
  }
  small{
    display: block;
    text-align: center;
    margin-top: 10px;
    color: #999;
  }
}

/* 手语学堂 */

.gesture{
  .obj-wrap{
    overflow: hidden;
    width: 49%;
    margin-bottom: 10px;
    &:nth-child(odd){
      float: left;
    }
    &:nth-child(even){
      float: right;
    }
  }
  .hd{
    min-height: 100px;
    position: relative;
    border-bottom: $baseborder;
    overflow: hidden;
    .head-lg{    
      display: block;
      max-height: 100px;
    }
    video{
      // border: 1px solid red;
      display: block;
      position: absolute;
      height: 100px;
      width: 100%;
    }
  }
  .ft{
    background: #fff;
    h4{
      font-size: 16px;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      margin-bottom: 6px;
    }
    p{
      span{
        font-size: 12px;
        color: #999;
      }
    }
  }
}











